<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Index</title>
  <link rel="stylesheet" href="style/reset.css">
  <link rel="stylesheet" href="style/common.css">
  <link rel="stylesheet" href="style/index.css">
</head>

<body>
  <div class="wapper">
    <!-- 头部 -->
    <header>
      <nav>
        <a class="logo" href="#"><img src="images/logo.png" alt=""></a>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">Laya 家族</a></li>
          <li><a href="#">游戏</a></li>
          <li><a href="#">新闻动态</a></li>
          <li><a href="#">开发者中心</a></li>
          <li><a href="#">开发者社区</a></li>
          <li><a href="#">开放平台</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
        <div class="dropdown">
          <button class="dropbtn">
            <p>Language</p>
            <img src="images/dropdown.png" alt="">
          </button>
          <div class="dropdown-content">
            <a href="#">下拉菜单 1</a>
            <a href="#">下拉菜单 2</a>
            <a href="#">下拉菜单 3</a>
          </div>
        </div>
      </nav>
    </header>
    <!-- 内容图片  -->
    <section class="banner">
      <img src="images/banner.jpg" alt="">
    </section>
    <!-- 内容LayaFlash -->
    <section class="flash">
      <div class="flash_con">
        <div class="con_left">
          <h2>LayaFlash 引擎</h2>
          <p class="tit">让Flash技术变成开发HTML5产品的利器</p>
          <ul>
            <li>
              <a class="img" href="#"><img src="images/flash_01.png" alt=""></a>
              <div class="text">
                <a href="#">快速Flash产品转换</a>
                <p>Flash页游\手游仅需1个人7天即可 转换为HTML5和APP游戏</p>
              </div>
            </li>
            <li>
              <a class="img" href="#"><img src="images/flash_02.png" alt=""></a>
              <div class="text">
                <a href="#">LayaFlash IDE</a>
                <p>支持代码编译、调试、压缩与混淆 加密、资源转换、在线文档等功能</p>
              </div>
            </li>
            <li>
              <a class="img" href="#"><img src="images/flash_03.png" alt=""></a>
              <div class="text">
                <a href="#">HTML5零学习成本</a>
                <p>AS3开发者可直接使用Flash开源框 架和工具链进行开发HTML5</p>
              </div>
            </li>
            <li>
              <a class="img" href="#"><img src="images/flash_04.png" alt=""></a>
              <div class="text">
                <a href="#">性能媲美APP</a>
                <p>LayaFlash引擎的重度游戏已运行于 QQ空间等平台，性能媲美APP</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="con_right">
          <img src="images/flash_00.png" alt="">
        </div>
      </div>
      <div class="clear"></div>
    </section>
    <!-- 内容Layabox优势 -->
    <section class="advantage">
      <img class="image" src="images/advantage_00.png" alt="">
      <div class="advan_con">
        <h2>Layabox 优势</h2>
        <ul>
          <li>
            <a class="img" href="#"><img src="images/advantage_01.png" alt=""></a>
            <a class="title" href="">快速上手，Flash程序员3小时掌握HTML5开发</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/advantage_02.png" alt=""></a>
            <a class="title" href="">4年优化打磨，LayaPlayer运行器性能媲美APP</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/advantage_03.png" alt=""></a>
            <a class="title" href="">超5亿的LayaPlayer移动设备安装量帮助CP发行</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/advantage_04.png" alt=""></a>
            <a class="title" href="">使用LayaFlash开发大型HTML5游戏的企业超100家</a>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </section>
    <!-- 内容Layabox产品家族 -->
    <section class="family">
      <div class="family_con">
        <h2>Layabox产品家族</h2>
        <ul>
          <li>
            <a class="img" href="#"><img src="images/family_01.png" alt=""></a>
            <div class="text">
              <a href="#">LayaAir</a>
              <p>核心库仅100K左右的新一代HTML5引擎，支 持AS3\TS\JS语言开发，支持2D\3D，非运行 器模式下性能媲美APP。</p>
            </div>
          </li>
          <li>
            <a class="img" href="#"><img src="images/family_02.png" alt=""></a>
            <div class="text">
              <a href="#">LayaPublish</a>
              <p>Layabox发行业务，通过在H5产业链中的技术 桥梁优势，帮助CP获得流量支持。</p>
            </div>
          </li>
          <li>
            <a class="img" href="#"><img src="images/family_03.png" alt=""></a>
            <div class="text">
              <a href="#">LayaFlash</a>
              <p>使用Flash AS3语言开发H5的引擎框架，可直 接在FB或FD中开发、调试、编译H5，也可快 速将Flash页游\手游转换成H5游戏。</p>
            </div>
          </li>
          <li>
            <a class="img" href="#"><img src="images/family_04.png" alt=""></a>
            <div class="text">
              <a href="#">LayaStore</a>
              <p>嵌入式HTML5商城，APP只需嵌入20K的SDK 即可以获得托管式HTML5商店服务，进入流量 获利新时代。</p>
            </div>
          </li>
          <li>
            <a class="img" href="#"><img src="images/family_05.png" alt=""></a>
            <div class="text">
              <a href="#">LayaPlayer</a>
              <p>HTML5高速运行器，性能卓越、支持大型 HTML5游戏流畅运行，目前已植入QQ、百度 等20多家主流平台，安装量超5亿。</p>
            </div>
          </li>
          <li>
            <a class="img" href="#"><img src="images/family_06.png" alt=""></a>
            <div class="text">
              <a href="#">LayaOpen</a>
              <p>Layabox开放平台，整合了Laya提供的各项运 营，管理服务的服务，提供给游戏提供商和互 联网渠道的统一开放平台。</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </section>
    <!-- 内容游戏 -->
    <section class="game">
      <div class="top">
        <h3>采用Layabox引擎的精彩游戏</h3>
        <a class="more" href="#">更多</a>
      </div>
      <div class="clear"></div>
      <div class="game_con">
        <a class="image" href="#"><img src="images/game_00.png" alt=""></a>
        <ul>
          <li>
            <a class="img" href="#"><img src="images/game_01.png" alt=""></a>
            <a class="text" href="#">猎刃2</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_02.png" alt=""></a>
            <a class="text" href="#">上吧主公</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_03.png" alt=""></a>
            <a class="text" href="#">醉西游</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_04.png" alt=""></a>
            <a class="text" href="#">魔卡幻想</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_05.png" alt=""></a>
            <a class="text" href="#">超能战队</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_06.png" alt=""></a>
            <a class="text" href="#">刀塔大菠萝</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_07.png" alt=""></a>
            <a class="text" href="#">轰三国</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_08.png" alt=""></a>
            <a class="text" href="#">迷你猎人</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_09.png" alt=""></a>
            <a class="text" href="#">萌挂三国</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_10.png" alt=""></a>
            <a class="text" href="#">夺塔三国</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_11.png" alt=""></a>
            <a class="text" href="#">英雄争霸</a>
          </li>
          <li>
            <a class="img" href="#"><img src="images/game_12.png" alt=""></a>
            <a class="text" href="#">战争之门</a>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </section>
    <!-- 内容合作伙伴 -->
    <section class="parterner">
      <div class="part_con">
        <h2>合作伙伴<span>(排序不分先后)</span></h2>
        <ul>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_01.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_02.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_03.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_04.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_05.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_06.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_07.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_08.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_09.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_10.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_11.png" alt="">
            </a>
          </li>
          <li>
            <a class="img" href="#">
              <img src="images/parterner_12.png" alt="">
            </a>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </section>
    <!-- 底部 -->
    <footer>
      <div class="foot_con">
        <div class="left">
          <a href="#">公司简介</a>
          <a href="#">联系方式</a>
          <a href="#">人才招聘</a>
          <p>All Copyright Reserved by Layabox Inc. 京ICP备15008163号-1 </p>
        </div>
        <div class="right">
          <div class="img one">
            <img src="images/footer_01.png" alt="">
            <img class="image1" src="images/footer_00.png" alt="">
          </div>
          <div class="img two">
            <img src="images/footer_02.png" alt="">
            <img class="image2" src="images/footer_00.png" alt="">
          </div>
          <div class="img three">
            <img src="images/footer_03.png" alt="">
            <img class="image3" src="images/footer_00.png" alt="">
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </footer>
  </div>
</body>

</html>